<template>
	<div class="layout-pd">
    <zh-space>
      <zh-card title="">
				<zh-form ref="queyFormRef" :model="state.queryParam">
					<zh-form-input
						prop="formClassTitle"
						label="分类名称"
						placeholder="支持模糊查询"
						v-model="state.queryParam.formClassTitle"
					></zh-form-input>
          <zh-form-select prop="formClassStatus" label="有效状态" :options="state.statusDictData" placeholder="请选择" v-model="state.queryParam.formClassStatus"></zh-form-select>
          <template v-if="state.advanced">
            <zh-form-input
              prop="formClassCode"
              label="分类编码"
              placeholder="精确查询"
              v-model="state.queryParam.formClassCode"
            ></zh-form-input>
						<zh-form-choose-org prop="orgId" label="所属组织" v-model="state.queryParam.orgId"></zh-form-choose-org>
            <zh-form-cascader
              prop="areaCode"
              label="行政区划"
              placeholder="请选择"
              v-model="state.queryParam.areaCode"
              :props="{checkStrictly: true,emitPath:false}"
              :options="state.areaCodeSelectTreeData"
            ></zh-form-cascader>
            <zh-form-select
              prop="appId"
              :lazy="true"
              label="所属应用"
              v-model="state.queryParam.appId"
              :fieldNames="{ label: 'appName', value: 'appId' }"
              funcCode="application0012"
              searchField="appName"
            ></zh-form-select>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="queyFormRef" :table-ref="tableListRef"></zh-form-query>
				</zh-form>
			</zh-card>
      <zh-table
				ref="tableListRef"
				title="表单分类列表"
				:height="600"
        type="default"
        funcCode="formClass0001"
				:columns="state.tableColumn"
        :column-config="{resizable: true}"
        :tree-config="{transform: true, rowField: 'formClassCode', parentField: 'parentId'}"
				:disabled="false"
        :stripe="false"
        :rowConfig="{keyField:'formClassCode'}"
				highlight-current-row
			>
        <template #header_button>
          <zh-button button-type="add" v-func:formClass0004 @click="addClass(row)">新建</zh-button>
        </template>
				<template #status_default="{ row }">
					<zh-badge :status="statusMap[row.formClassStatus].status" :text="statusMap[row.formClassStatus].text" />
				</template>
        <template #operate_default="{ row }">
          <el-tooltip
            effect="dark"
            content="查看分类信息"
            placement="top"
            
          >
            <zh-button v-func:formClass0002 button-type="query" link @click="queryModel(row)"></zh-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="修改信息"
            placement="top"
            
          >
            <zh-button v-func:formClass0005 button-type="edit" link @click="editClass(row)"></zh-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="下级插入分类"
            placement="top"
            
          >
            <zh-button v-func:formClass0004 button-type="add" link @click="addChildClass(row)"></zh-button>
          </el-tooltip>
          <el-popconfirm title="是否确认删除该分类及下级所有分类?" @confirm="delClass(row)">
            <template #reference>
              <zh-button type="danger" v-func:formClass0006  icon="ele-Minus" link ></zh-button>
            </template>
          </el-popconfirm>
          
				</template>
			</zh-table>
    </zh-space>
    <zh-dialog :title="state.modalTitle"  width="50%" v-model="state.visible">
			<FormClassForm ref="formClassPage" :showFlag="state.showFlag" :classInfo="state.selectRow" v-model="state.visible" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClose">{{state.showFlag?'关闭':'取消'}}</el-button>
          <el-button v-if="!state.showFlag" type="primary" @click="saveClass">
            保存
          </el-button>
        </span>
      </template>
    </zh-dialog>
  </div>
</template>
<script lang="ts" setup name="FormClass">
import FormClassForm from './component/FormClassForm.vue';
import { ElMessage } from 'element-plus';
const statusMap = {
	0: {
		status: 'error',
		text: '无效',
	},
	1: {
		status: 'processing',
		text: '有效',
	},
};
//------------------接收传入参数(组件)-------------------

//------------------定义子组件---------------------------
const queyFormRef=ref()
const tableListRef=ref()
const formClassPage=ref()

//------------------内部变量定义-------------------------
const state=reactive({
  advanced:false,
  queryParam:{formClassStatus:'1'} as any,
  statusDictData:[{dictKey:'1',dictValue:'有效'},{dictKey:'0',dictValue:'无效'}],
  areaCodeSelectTreeData:[],
  tableColumn:[
    { type: 'seq', width: 60, fixed: 'left', align: 'center', title: '序号', },
    { field: 'formClassCode', title: '分类编码', fixed: 'left', align: 'left',treeNode:'true', width: 200 },
		{ field: 'formClassTitle', title: '分类名称', fixed: 'left', align: 'center', width: 150 },
    { field: 'formClassStatus', title: '有效状态', align: 'center',  minWidth: 100,slots: {default: 'status_default'}},
    { field: 'orderNo', title: '排序号',  align: 'center', width: 80 },
    { field: 'remarks', title: '备注',  align: 'center', width: 300 },
    { field: 'orgName', title: '所属组织',  align: 'center', width: 150 },
    { field: 'areaName', title: '所属行政区划',  align: 'center', width: 150 },
    { field: 'appName', title: '所属应用',  align: 'center', width: 150 },
    { field: 'operate', title: '操作', align: 'center',fixed: 'right',  width: 220,slots: {default: 'operate_default'}},
  ],
  selectRow:{},
  visible:false,
  modalTitle:"操作",
  showFlag:false,
})
//------------------定义调用方法-------------------------
const onClose=()=>{
  state.visible = false;
}
function getAreaCodeData() {
	setTimeout(() => {
		$api.common.send.post('dict0026', {}).then((res) => {
			state.areaCodeSelectTreeData = res.result;
		});
	}, 20);
}
const addClass=()=>{
  state.modalTitle = '新增分类信息';
  let params={parentId:null}
  state.selectRow=params
  state.showFlag=false;
  state.visible = true;
}
const addChildClass=(row)=>{
  state.modalTitle = '新增分类信息';
	state.visible = true;
  let params={parentId:row.formClassCode}
  state.selectRow=params
  state.showFlag=false;
  state.visible = true;
}
const editClass=(row)=>{
  state.modalTitle = '修改分类信息';
  state.selectRow=row
  state.showFlag=false;
  state.visible = true;
}
const queryModel=(row)=>{
 state.modalTitle = '查看分类信息';
 state.selectRow=row
 state.showFlag=true
 state.visible = true;
}
const delClass=(row)=>{
  let params={formClassCode:row.formClassCode}
  $api.common.send.post('formClass0006',params).then(()=>{
    ElMessage.success('删除成功！');
    refreshTable();
  });
 
}
const saveClass=()=>{
  formClassPage.value.save().then(() => {
    refreshTable();
	});
}
const refreshTable=()=>{
  tableListRef.value.refresh(state.queryParam)
}
//------------------初始化------------------------------
onMounted(()=>{
  nextTick(()=>{
    getAreaCodeData();
    tableListRef.value.query(state.queryParam)
  })
})
//------------设置给父组件调用的数据/方法(组件)-----------

</script>
<style lang="scss" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
